﻿/// <reference path="../GeneratedArtifacts/viewModel.js" />
/// <reference path="../Scripts/c1ls-4.0.20141.30.js" />

if (typeof c1ls === "undefined") {
    window.location.href = "http://bit.ly/c1ls-nuget";
}

// http://bit.ly/c1ls-grid
//
myapp.GridEditingLookupCell.WijmoGrid_render = function (element, contentItem) {

    var table = $("<table/>");
    table.appendTo($(element));

    contentItem.value.oncollectionchange = function () {
        var grid = c1ls.getGridContent(table, contentItem, { autoHide: true });
        contentItem.screen.WijmoGrid = grid;

        var cat = grid.FindColumn("CategoryName");
        cat.width = 150;
        cat.readOnly = false;

        function beforeCellEdit(e, args) {
            if (args.cell.column().key === "CategoryName") {
                var obj = grid.GetRowEntity(args.cell.row().dataRowIndex);
                var select = $("<select data-role='listview' class='msls-listview'/>");
                select.attr("style", "width: 100%");
                select.appendTo(args.cell.container().empty());
                select.html(getCategoryOptions(contentItem.screen).join("\r\n"));
                select.val(obj.CategoryID);
                select.bind("change", function () {
                    var id = Number(select.val());
                    var row = contentItem.screen.Products.selectedItem;
                    contentItem.screen.Categories.data.forEach(function (c) {
                        if (c.CategoryID === id) {
                            row.Category = c;
                        }
                    });
                });
                args.handled = true;
            }
        }

        function afterCellEdit(e, args) {
            if (args.cell.column().key === "CategoryName") {
                var text = $(args.cell.container().children()[0]).children(":selected").text();
                var val = $(args.cell.container().children()[0]).children(":selected").val();
                var obj = grid.GetRowEntity(args.cell.row().dataRowIndex);
                args.cell.container().children().remove();
                args.cell.container().text(text);
                obj.CategoryID = Number(val);
                args.handled = true;
            }
        }

        table.wijgrid({
            // initialization
            columns: grid.Columns,
            data: grid.Rows(),

            // editing
            allowEditing: true,
            afterCellUpdate: grid.OnCellUpdate,
            currentCellChanged: grid.OnCellChanged,
            beforeCellEdit: beforeCellEdit,
            afterCellEdit: afterCellEdit,

            // sorting
            allowSorting: true,
            sorting: grid.Sorting,

            // filtering
            showFilter: false,
            filtering: grid.Filtering,

            // selection
            selectionMode: "singleRow",
            showRowHeader: true,
            showSelectionOnRender: false,
            cellClicked: grid.OnCellClicked,
            cellStyleFormatter: grid.OnCellFormat
        });
    };

    c1ls.renderControl(contentItem);
};

myapp.GridEditingLookupCell.AddNew_canExecute = function (screen) {
    return screen.Products.isLoaded;
};

myapp.GridEditingLookupCell.AddNew_execute = function (screen) {
    screen.Products.addNew();
    screen.WijmoGrid.EntityChanged(msls.EntityState.added);
};

myapp.GridEditingLookupCell.DeleteSelected_canExecute = function (screen) {
    $(".msls-header").removeClass("slidedown");
    $(".msls-footer").removeClass("slideup");
    return screen.Products.selectedItem != null;
};

myapp.GridEditingLookupCell.DeleteSelected_execute = function (screen) {
    screen.Products.deleteSelected();
    screen.WijmoGrid.EntityChanged(msls.EntityState.deleted);
};

myapp.GridEditingLookupCell.created = function (screen) {
    if (!screen.Categories.isLoaded) {
        screen.Categories.load();
    }
};

function getCategoryOptions(screen) {
    var items = [];
    if (screen.Categories.isLoaded) {
        screen.Categories.data.forEach(function (c) {
            items.push("<option value=" + c.CategoryID + ">" + c.CategoryName + "</option>");
        });
    }
    return items;
}